import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Card, Row, Col, Tabs, message } from 'antd';
import copy from 'copy-to-clipboard';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import GroupInfo from '../components/info';
import GroupDevice from '../components/device';

import styles from './style.less';

const { TabPane } = Tabs;

@connect(({ groups, loading }) => ({
  groups,
  loading: loading.models.groups,
}))
class GroupsDetail extends PureComponent {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'groups/detail',
      payload: params.id,
    });
  }

  render() {
    const {
      groups: { current },
    } = this.props;

    const copyCode = () => {
      if (copy(current.gd ? current.gd.code : '')) {
        message.success(formatMessage({ id: 'app.dm.groups.detail.copy.success' }));
      } else {
        message.error(formatMessage({ id: 'app.dm.groups.detail.copy.error' }));
      }
    };

    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card bordered={false} style={{ marginBottom: '24px' }}>
            <Row style={{ marginBottom: '24px' }}>
              <span style={{ fontWeight: 'bold', marginRight: 20 }}>
                {current.gd ? current.gd.name : ''}
              </span>
            </Row>
            <Row>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.groups.detail.lvl" />：
                </span>
                <span style={{ color: '#666666' }}>
                  <FormattedMessage id="app.dm.groups.detail.group" /> /{' '}
                  {current.path ? current.path : ''}
                </span>
              </Col>
              <Col span={16}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.groups.detail.code" />：
                </span>
                <span style={{ color: '#666666' }}>{current.gd ? current.gd.code : ''}</span>
                <a onClick={() => copyCode()} style={{ marginLeft: 10 }}>
                  <FormattedMessage id="app.dm.groups.detail.copy" />
                </a>
              </Col>
            </Row>
            <Row style={{ marginTop: 5 }}>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.groups.detail.deviceNum" />：
                </span>
                <span style={{ color: '#666666' }}>
                  {current.statistics ? current.statistics.deviceNum : ''}
                </span>
              </Col>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.groups.detail.activeDeviceNum" />：
                </span>
                <span style={{ color: '#666666' }}>
                  {current.statistics ? current.statistics.activeDeviceNum : ''}
                </span>
              </Col>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.groups.detail.online" />：
                </span>
                <span style={{ color: '#666666' }}>0</span>
              </Col>
            </Row>
          </Card>
          <Card bordered={false}>
            <Tabs defaultActiveKey="1" animated={false}>
              <TabPane tab={formatMessage({ id: 'app.dm.groups.detail.info' })} key="1">
                <GroupInfo current={current} />
              </TabPane>
              <TabPane tab={formatMessage({ id: 'app.dm.groups.detail.devicelist' })} key="2">
                <GroupDevice />
              </TabPane>
              <TabPane
                tab={formatMessage({ id: 'app.dm.groups.detail.childgroup' })}
                key="3"
              ></TabPane>
            </Tabs>
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default GroupsDetail;
